import React, { Component } from 'react';
import '../styles/Tabbar.scss'
import { withRouter} from 'react-router-dom';
class MyTabbar extends Component {
    constructor(props){
        super(props)
        this.state={
            tablist:[
                {icon:'icon-dianpu',text:'店铺',link:'/index/home'},
                {icon:'icon-fenlei',text:'分类',link:'/index/cate'},
                {icon:'icon-31gouwuche',text:'购物车',link:'/index/goodcar'},
                {icon:'icon-gerenzhongxin',text:'个人中心',link:'/index/personalcenter'},
            ],
            btnindex:0
        }
    }
    btnclick(index){//点击事件
        console.log(index);
     this.setState({ btnindex:index})
     this.props.history.push({pathname:this.state.tablist[index].link })
    
    }
    render() {
        return (
            <div className='MyTabbar' >
              {
                this.state.tablist.map((item,index)=>{
                    return(
                        <div  className={'btn ' + (this.state.btnindex == index ? 'active' : ' ')} key={index} onClick={() => { this.btnclick(index) }}>
                            <span className={'iconfont ' + item.icon}> </span>
                            <div className="text"> {item.text}</div>
                        </div>
                    ) 
                }) 
              }
            </div>
        );
    }
}

export default withRouter(MyTabbar)
;